<template>
  <div class="box-main1">
    <div class="box-header2">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/index' }">控制台</el-breadcrumb-item>
        <el-breadcrumb-item>简单登记作业完成情况</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="box-main2">
      <div class="box-search2">

        <div class="box-input2" style="width: 180px">
          <el-input  @keydown.enter.native="clkBtnSearch" @clear="clkBtnSearch" clearable
                     size="mini" v-model="searchInfo.searchKey" placeholder="作业名称"></el-input>
        </div>
        <div class="box-input2">
          <el-button size="mini" type="primary" icon="el-icon-search" @click="clkBtnSearch">搜索</el-button>
        </div>

      </div>

      <div class="box-content2">
        <div class="box-table2">
          <el-table class="tbl1"  :data="studentZuoyePage.list" :border="true" :stripe="true" size="small">

            <el-table-column type="index" :index="1" label="序号" width="55"></el-table-column>
            <el-table-column label="作业名称" width="270" align="left">
              <template slot-scope="scope">
                <span >{{scope.row.buzhi_zuoye_title}}</span>
              </template>
            </el-table-column>
            <el-table-column label="学生组" width="100">
              <template slot-scope="scope">
                <span >{{scope.row.studentGroupName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="学生" width="50">
              <template slot-scope="scope">
                <span >{{scope.row.student_realname}}</span>
              </template>
            </el-table-column>
            <el-table-column label="布置日期" width="100">
              <template slot-scope="scope">
                <span >{{scope.row.buzhi_date|filterDateFormat1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="80">
              <template slot-scope="scope" >
                    <span v-if="scope.row.wancheng_status == 0" class="square square-weiwancheng" label="0">未完成</span>
                    <span v-if="scope.row.wancheng_status == 1" class="square square-yiwancheng" label="1">已完成</span>
<!--                    <span v-if="scope.row.wancheng_status == 2" class="" label="2">已点评</span>-->

              </template>
            </el-table-column>

            <el-table-column  label="操作" width="330">
              <template slot-scope="scope">

                <span>
                  <el-upload style="display: inline-block"
                             name="uploadFile1"
                             :show-file-list="false"
                             :action="actionUrl"
                             :data="zuoyeUploadData"
                             :auto-upload="true"
                             :on-success="zuoyeSuccess"
                             :on-error="zuoyeErr"
                             :before-upload="beforeUpload"
                  >
                    <el-button size="mini" type="primary" @click="zuoyeData(scope.row)">上传作业</el-button>
                  </el-upload>
                </span>
                <span>
                 <el-button v-if="scope.row.zuoye_file_path != null || scope.row.zuoye_file_path != 'null' " type="primary" size="mini" @click="dowloadZuoye(scope.row)">下载作业</el-button>
                </span>
                <span>
                   <el-button v-if="_hasPermission(userPermissions, 'class_manage' || 'system_manage')" type="primary" size="mini" @click="clkBtnDelete(scope.row,'2' )">删除作业记录</el-button>
                </span>
                <span>
                  <el-button v-if="scope.row.zuoye_file_path != null" type="success" size="mini" @click="checkZuoye(scope.row)">查看</el-button>
                </span>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="box-page2">
          <el-pagination layout="prev, pager, next" :total="studentZuoyePage.total"
                         :current-page="studentZuoyePage.pageNum" :page-size="studentZuoyePage.pageSize"
                         @current-change="chgCurrPage">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import request from '@/common/utils/request';
  import PermissionHelper from "@/common/utils/PermissionHelper";

  export default {
    computed: {
      loginUserInfo() {
        return this.$store.state.loginUserInfo;
      },
      userPermissions(){
        return this.$store.state.userPermissions;
      },
    },
    data() {
      return {
        searchInfo: {searchKey: null},
        studentZuoyePage: {pageNum:1 ,pageSize:12, list:[] },

        pageLoading: false,

        showAddBuzhiZuoyeDialog: false,

        buzhiZuoye: {},

        actionUrl: '',
        zuoyeUploadData: {},
        disable: false,
        drawer: false,
        innerDrawer: false,
        userName: {},
      };
    },
    mounted() {
      this._initData();
    },
    watch: {
      $route: {
        handler: function (to, from) {
          if (to.path == '/admin/simple_dengji_zuoye_mgr') {
            this._initData();
          }
        }, immediate: true
      },
    },
    methods: {
      _initData() {
        this.actionUrl =  this.settings.apiUrl+"/student_zuoye/zuoye_upload";
        this.getList();
      },
      _hasPermission(allPermissions, searchPermission){
        return PermissionHelper.hasPermission(allPermissions,searchPermission);

      },
      zuoyeSuccess(file, fileList) {
        if (file.code == 0) {
          this.$alert("上传成功~");
          this.buzhiZuoye.wancheng_status = '1';
          this.clkWanChengStatus(this.buzhiZuoye);
          this.buzhiZuoye = {};
        } else {
          this.$alert("上传失败！" + file.msg)
        }
      },
      zuoyeErr(file, fileList) {
        this.$alert("上传失败！" + file.msg);
      },
      beforeUpload(file) {

      },
      zuoyeData (row) {
        this.zuoyeUploadData = {"noid": row.noid};
        this.buzhiZuoye = row;
      },
      dowloadZuoye(row){
        let file_path = row.zuoye_file_path;
        if(file_path != null) {
          let url = this.settings.apiUrl + "/student_zuoye/zuoye_download_path";
          let d1 = {row};
          let download_path = "";
          request.post(url, d1).then((d1r => {
            if (d1r.code == 0) {
              download_path = d1r.data.download_path;
              window.open(download_path + "/" + file_path);
            }
          }))
        }
      },
      clkBtnSearch() {
        this.getList();
      },

      getList() {
        let url1 = this.settings.apiUrl + '/student_zuoye/simple_dengji_page';

        let d1 = {'usercode': this.loginUserInfo.usercode,
          'userInfoId': this.loginUserInfo.noid};
        d1.pageNum = this.studentZuoyePage.pageNum;
        d1.pageSize = this.studentZuoyePage.pageSize;
        d1.searchKey = this.searchInfo.searchKey;
        // this.$alert(d1.usercode);
        request.post(url1, d1).then((d1r) => {
          this.pageLoading = false;
          if (d1r.code === 0) {
            this.studentZuoyePage = d1r.data;
          } else {

            this.$alert('获取学生的作业信息失败：' + d1r.msg, '提示', {
              type: 'warning'
            });

          }
        }).catch(err => {
          this.pageLoading = false;
        });
      },
      // 点击刷新所有作业的学生完成情况
      clkBtnRefresh() {
        this.buzhiZuoye = {};
      },
      //修改完成状态
      clkWanChengStatus(row) {
        let url = this.settings.apiUrl + "/student_zuoye/update";
        let d1 = {wancheng_status: row.wancheng_status, noid: row.noid};
        request.post(url, d1).then((d1r => {
          if (d1r.code == 0) {
            this.getList();
            this.$message("修改作业状态成功~");
          } else {
            this.$alert('修改作业状态失败：' + d1r.msg, '提示', {
              type: 'warning'
            })
          }
        }))
      },
      clkBtnEdit(row) {
        this.buzhiZuoye = JSON.parse(JSON.stringify(row));
        this.showAddBuzhiZuoyeDialog = true;
      },
      clkBtnDelete(row) {
        // this.$confirm('您确信要删除该记录吗', "提示").then(() => {
          let url1 = this.settings.apiUrl + "/student_zuoye/delete";
          let d1 = {noid: row.noid, 'userInfoId': this.loginUserInfo.noid};
          request.post(url1, d1).then((d1r => {
            if (d1r.code == 0) {
              this.getList();
              this.$message("您删除成功了");
            } else {
              this.$message("删除失败" + d1r.msg + "提示", {
                type: 'warning'
              });
            }
          }))
        // })


      },
      //上传作业
      // submitZuoYe(row) {
      //   this.$alert(row);
      // },
      //查看作业
      checkZuoye(row) {
        this.$router.push({path:'/admin/zuoye_show',query:{id:row.noid}});
      },
      chgCurrPage(val){
        this.studentZuoyePage.pageNum = val;
        this.getPage();
      },
      getPage(){
        this.getList();
      }

    },
    filters:{
      filterSex(srcVal){
        if(srcVal==1){
          return '男';
        }
        if(srcVal==2){
          return '女';
        }
        return '未知';
      },
      filterDateFormat1(srcVal){
        if(!srcVal){
          return "";
        }
        if(srcVal.length<10){
          return srcVal;
        }
        return srcVal.substr(0,10);
      },
      filterMultiText(srcVal){

        return srcVal;
      }
    }

  };
</script>

<style lang="scss" scoped="scoped">
  .box-main2 {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .box-header2{
    height: 30px;
    background-color: #eceeef;
    padding-left:20px;
    padding-top:8px;

  }

  .box-search2{
    display: flex;
  }

  .box-page2{
    display: flex;
    justify-content: flex-end;
  }

  .box-search2{
    padding-bottom: 10px;
    .box-input2{
      padding-right:10px;
    }
  }

  .btn-mini{
    .el-radio-button__inner{
      padding-left: 6px;
      padding-right:6px;
    }
  }

  .box-table2{
    >>>.el-drawer{
      box-shadow: none;
    }
  }
  .square{
    display: flex;
    width: 60px;
    height: 25px;
    line-height: 28px;
    border-radius: 5px;
    padding-left: 11px;
  }
  .square-weiwancheng{
    background-color:#005682;
    color:#fff;
  }
  .square-yiwancheng{
    background-color: #13ce66;
    color:#000;
  }

</style>
